<template>
  <view class="content" v-if="!auth || JSON.stringify(auth) == '{}'">
    <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
    </u-empty>
  </view>
  <view class="content" v-else>
    <u-subsection
      :list="toplist"
      mode="button"
      :bgColor="'#ffffff'"
      @change="topselect"
      :current="current"
    ></u-subsection>

    <view class="content1">
      <!-- <view class="top">
				<u-tabs :list="typelist" @click="selecttype"></u-tabs>
			</view> -->
      <view class="data">
        <view class="data-left" v-if="empid == 1" @click="tocountorder('1')">
          <view class="left-title"> 门店总额 </view>
          <view class="left-price">
            {{ storecountmoney }}
          </view>
        </view>
        <view class="data-left" v-else @click="tocountorder(empid)">
          <view class="left-title"> 个人总金额 </view>
          <view class="left-price">
            {{ amount }}
          </view>
        </view>
        <view class="data-right" v-if="empid == 1" @click="tocountorder('1')">
          <view class="right-title"> 门店总单 </view>
          <view class="right-math">
            {{ storecountorder }}
          </view>
        </view>
        <view class="data-right" v-else @click="tocountorder(empid)">
          <view class="right-title"> 个人总订单(单) </view>
          <view class="right-math">
            {{ total }}
          </view>
        </view>
      </view>
    </view>

    <u-picker
      :show="showyear"
      @confirm="confirm"
      @cancel="cancel"
      :columns="yearlist"
    ></u-picker>
    <u-picker
      :show="showyeji"
      @confirm="confirmyeji"
      @cancel="cancelyeji"
      :columns="storeyeji"
    ></u-picker>

    <view v-if="empid == 1 && flag == 'isShow'" class="charts-box1">
      <view class="remark">
        <h4>年度总额：</h4>
      </view>
      <qiun-data-charts type="pie" :opts="opts1" :chartData="chartData1" />
    </view>
    <view v-if="empid == 1 && flag == 'isShow'" class="charts-box2">
      <view class="remark">
        <h4>年度总订单：</h4>
      </view>
      <qiun-data-charts type="pie" :opts="opts2" :chartData="chartData2" />
    </view>

    <view v-if="empid != 1 && flag == 'isShow'" class="charts-box">
      <qiun-data-charts
        type="line"
        :opts="opts"
        :chartData="chartData"
        :ontouch="true"
      />
    </view>

    <u-grid :col="5" :border="true" v-if="empid != 1">
      <u-grid-item :customStyle="ItemStyle">
        <text>时间</text>
      </u-grid-item>
      <u-grid-item :customStyle="ItemStyle">
        <text>目标(元)</text>
      </u-grid-item>
      <u-grid-item :customStyle="ItemStyle">
        <text>完成(元)</text>
      </u-grid-item>
      <u-grid-item :customStyle="ItemStyle">
        <text>订单总数</text>
      </u-grid-item>
      <u-grid-item :customStyle="ItemStyle">
        <text>完成度</text>
      </u-grid-item>
      <u-grid :col="5" :border="true" v-for="item in tablist" :key="item.id">
        <u-grid-item :customStyle="ItemBoder">
          <text @click="getdate(item.date)">{{ item.date }}</text>
        </u-grid-item>
        <u-grid-item :customStyle="ItemStyle">
          <text>{{ item.target }}</text>
        </u-grid-item>
        <u-grid-item :customStyle="ItemStyle">
          <text>{{ item.completeprice }}</text>
        </u-grid-item>
        <u-grid-item :customStyle="ItemStyle">
          <text>{{ item.ordertotal }}</text>
        </u-grid-item>
        <u-grid-item :customStyle="ItemStyle">
          <text>{{ item.complete }}</text>
        </u-grid-item>
      </u-grid>
    </u-grid>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.auth = this.$u.auth.check();

    this.empid = uni.getStorageSync("empid")
      ? uni.getStorageSync("empid")
      : this.auth.id;

    this.analysis();
    this.getyears();
    this.getindexlist();
  },
  created() {
      this.$u.count.check();
  },


  data() {
    return {
      curNow: 0,
      empid: "",
      flag: "isShow",
      ItemStyle: {
        padding: "1em 0em",
      },
      storecountmoney: 0,
      storecountorder: 0,
      ItemBoder: {
        padding: "1em 0em",
        color: "blue",
      },
      auth: {},
      filterResultData: [],
      yearlist: [],
      yearshow: false,
      toplist: [],
      tablelist: [],
      storenamelist: [],
      current: 0,
      yejitype: "",
      total: 0,
      opts1: {
        color: [
          "#73C0DE",
          "#FC8452",
          "#9A60B4",
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#3CA272",
          "#ea7ccc",
        ],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF",
          },
        },
      },
      opts2: {
        color: [
          "#FAC858",
          "#ea7ccc",
          "#3CA272",
          "#73C0DE",
          "#FC8452",
          "#9A60B4",
          "#1890FF",
          "#91CB74",
          "#EE6666",
        ],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF",
          },
        },
      },
      amount: 0,
      indexlist: [],
      showyear: false,
      bosslook: [],
      showyeji: false,
      storeyeji: [["个人业绩", "门店业绩"]],

      filterResultData: [],
      chartData: {},
      chartData1: {},
      chartData2: {},
      opts: {
        color: [
          "#9A60B4",
          "#FAC858",
          "#91CB74",
          "#73C0DE",
          "#1890FF",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#ea7ccc",
        ],
        padding: [15, 10, 0, 15],
        enableScroll: true,
        legend: {},
        xAxis: {
          disableGrid: true,
          scrollShow: true,
          itemCount: 8,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow",
          },
        },
      },
      type: "",

      typelist: [],
      tablist: [],
      list: [],
      indexdata: [],
      yejitype: "个人业绩",
      year: "",
    };
  },

  methods: {
    // 选中类型
    selecttype(e) {
      uni.showLoading({
        title: "加载中",
      });

      let date = new Date();

      this.year = date.getFullYear() + "年";

      console.log(this.year);

      this.type = e.type;
      this.getindexlist({ type: this.type, year: this.year });
    },
    async getindexlist(e) {
      let date = new Date();
      // console.log(e)

      this.year = date.getFullYear() + "年";
      if (e) {
        this.year = e.year;
        this.yejitype = e.yejitype ? e.yejitype : "";
        this.type = e.type;
        this.empid = e.empid;
      }

      let data = {
        adminid: this.auth.id,
        empid: this.empid,
        stoid: this.auth.stoid,
        year: this.year,
        yejitype: this.yejitype,
        type: this.type,
      };

      let result = await this.$u.api.admin.indexdata(data);
      if (result.code) {
        // 最高管理员赋值的数据
        if (this.auth.id == 1) {
          let res = {
            series: [
              {
                data: result.data.list,
              },
            ],
          };

          let res2 = {
            series: [
              {
                data: result.data.ordercountlist,
              },
            ],
          };

          // 转化成对象
          this.chartData1 = JSON.parse(JSON.stringify(res));
          this.chartData2 = JSON.parse(JSON.stringify(res2));
          this.total = result.data.empstorecount;
          this.amount = result.data.empstoreamount;
          this.storecountmoney = result.data.storecountmoney; //最高管理员一年所有门店所赚的钱
          this.storecountorder = result.data.storecountorder; //最高管理员一年所有门店的订单
          this.tablist = result.data.tablelist;
          this.chartData = result.data.empfenxi;

          uni.hideLoading();

          return false;
        }
        this.chartData = result.data.chart;
        this.total = result.data.total;
        this.amount = result.data.amount;
        this.typelist = result.data.typelist;
        (this.tablist = result.data.tablist), uni.hideLoading();
      }
    },
    topselect(e) {
      this.current = e; //分段器移动的位置

      if (e == 0) {
        this.flag = "isHide";

        this.showyear = true;
      } else if (e == 1) {
        if (this.auth.id == 1) {
          this.flag = "isHide";

          this.showyeji = true;
        }
      } else {
        if (this.auth.id == 1) {
          uni.$u.route({
            url: "/pagesA/admin/filteradmin",
          });
        } else {
          uni.showToast({
            title: "您暂没权限",
            icon: "none",
          });
        }
      }
    },
    confirm(e) {
      // 获取当年年份
      this.flag = "isShow";
      if (e.value[0] != "") {
        this.getindexlist({ year: e.value[0], empid: this.empid });
        this.analysis({ year: e.value[0] });
      }
      this.showyear = false;
    },
    confirmyeji(e) {
      this.flag = "isShow";

      if (e.value[0] != "") {
        this.getindexlist({
          yejitype: e.value[0],
          year: this.year,
          empid: this.auth.id,
        });
        this.analysis({ yejitype: e.value[0] });
      }

      if (this.auth.id == 1 && e.value[0] == "个人业绩") {
        uni.$u.route({
          url: "/pagesA/admin/filteradmin",
        });
      }

      this.showyeji = false;
    },
    cancel() {
      this.flag = "isShow";

      this.showyear = false;
    },
    cancelyeji() {
      this.flag = "isShow";

      this.showyeji = false;
    },
    async getyears() {
      let data = {
        adminid: this.auth.id,
      };

      let result = await this.$u.api.admin.getyearlist(data);
      if (result.code) {
        this.yearlist = result.data;
      }
    },
    getdate(e) {
      uni.$u.route({
        url: "/pagesA/admin/fenxilist",
        params: {
          date: e,
          empid: this.empid,
        },
      });
    },

    async analysis(e) {
      if (e) {
        this.year = e.year;
        this.yejitype = e.yejitype;
      }
      let data = {
        adminid: this.auth.id,
        empid: this.empid,
        year: this.year,
        yejitype: this.yejitype,
      };

      let result = await this.$u.api.admin.toptitle(data);
      if (result.code) {
        this.toplist = result.data;
        this.year = result.data[0]["name"];
      }
    },

    async tocountorder(e) {
      let date = new Date();

      let year = date.getFullYear();

      uni.$u.route({
        url: "/pagesA/admin/countorder",
        params: {
          empid: e,
          date: year,
        },
      });
    },
  },
};
</script>

<style lang="scss">
.content {
  background-color: #ffffff;
}

.charts-box2 {
  width: 90%;
  height: 300px;
  margin: 60px auto;
}

.charts-box1 {
  width: 90%;
  height: 300px;
  margin: 60px auto;
}

.charts-box {
  width: 90%;
  height: 300px;
  margin: 60px auto;
}

// .u-tabs__wrapper__nav.data-v-0de61367{
// 	background: #ffffff;
// 	display: flex;
// 	;
// }

.top {
  width: 100%;

  .content {
    margin: 15px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
}

.content {
  width: 100%;
  margin: 20rpx auto;
  height: 380rpx;
  background-color: #fff;

  .data {
    display: flex;
    height: 200rpx;

    .data-left {
      width: 50%;
      text-align: center;
      height: 250rpx;

      .left-title {
        margin-top: 90rpx;
      }

      .left-price {
        margin-top: 10rpx;
      }
    }

    .data-right {
      width: 50%;
      text-align: center;
      height: 250rpx;

      .right-title {
        margin-top: 90rpx;
      }

      .right-math {
        margin-top: 10rpx;
      }
    }
  }

  .progress {
    height: 50rpx;
    padding: 20rpx;
  }
}

.charts-box {
  width: 100%;
  height: 300px;
  background-color: #fff;
}

.table {
  width: 100%;
  height: auto;
  background-color: #fff;
  margin-top: 20rpx;
}

.my-td-p.data-v-2adce8a4 {
  border: 1px solid #eeeeee;
}

.grid-text {
  font-size: 14px;
  color: #222222;
  padding: 10rpx 0 20rpx 0rpx;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}

.u-grid-item.data-v-99a45d26 {
  border: 0.2px solid #eeeeee;
}
</style>
